<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import Test from './TesT'
// defineProps<{ msg: string }>() // 写法一

// defineProps({
//   msg: {
//     type: String,
//     default: '没收到传过来值过来'
//   }
// }) // 写法二

interface Iprops {
  msg: string
}
withDefaults(defineProps<Iprops>(), { msg: '第三种props 约束' })// 写法三

const emit = defineEmits(['add'])
const store = useStore()
const test = ref<InstanceType<typeof Test>|null>(null)
const changename = () => {
  store.dispatch('student/updateUsername', 'eslint + ts + 666')
}
const count = ref(0)
const child = ref([])
const childList = (el:HTMLElement|any) => {
  (child.value as Array<HTMLElement>).push(el)
}
onMounted(() => {
  console.log(test.value, 'test组件ref')
  console.log(child.value, '循环节点获取')
})
</script>

<template>
  <h1
    :ref="childList"
    v-for="i in 4"
    :key="i"
  >
    {{ msg }}
  </h1>
  <a-button
    type="default"
    @click="emit('add', 666)"
  >
    app没传自定义函数过来给HelloWorld
  </a-button>
  <Test
    msg="ts666"
    ref="test"
  />
  <a-space :size="50">
    <a-button
      type="primary"
      @click="changename"
      class="globalColor"
    >
      changeStore
    </a-button>

    <button
      type="button"
      @click="count++"
    >
      count is: {{ count }}
    </button>
  </a-space>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped lang="less">
a {
  color: #42b983;
}
.globalColor {
  color: @redColor
}
label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
